<template>
  <div class="supContain">
    <div class="sectionHeaderContainer">{{item.sectionHeadTitle}}</div>
    <div class="accTitle" @click="toggleList(selfIndexPath.row)">
      <span>{{ (selfIndexPath.row+1) + '.  ' + item.area + '（' + item.pluginName + '）' }}</span>
      <img
        src="../../../images/arrow-right.png"
        alt="chevron"
        :class="[
          'accChevron',
          { open_menu: isDisplay, close_menu: !isDisplay},
        ]"
      />
    </div>
    <waterfall
      :class="['tempaccList', {maxHeight: isDisplay}]"
      :col="1"
      :data="list"
    >
      <template>
        <div class="cell-item" v-for="(item, index) in item.child" :key="index" v-bind:class="{noBottomMargin:index==list.length-1}">
            <div class="pluginItemContainer"  @click="callPlugin(item,index)">
                  <div class="pluginItemName">
                      <label class="pluginItemNameP">{{item.name}}</label>
                  </div>
                  <p class="pluginItemMethod">{{item.method}}</p>
            </div>

            <textarea class="pluginCallPanel"  v-bind:class="{pluginCallPanelHidden:index==currentPluginIndex}" v-model="currentPluginCallArgs"></textarea>

            <div class="debugExcuteBtn" v-bind:class="{debugExcuteBtnVisible:index==currentPluginIndex}" @click="handleCommonPluginMethod()">点击调用插件</div>
        </div>
      </template>
    </waterfall>
   
  </div>
</template>


<script>
export default {
  data() {
    return {
      isDisplay: false,
      // 点击的插件方法索引
      currentPluginIndex : -1 ,
      // 点击的插件调试默认调用参数
      currentPluginCallArgs: ''
    };
  },
  watch : {
    'selectIndexPath' : {
      handler(newValue,oldValue) {
        if (newValue.section == oldValue.section && newValue.row == oldValue.row && this.selfIndexPath.row == newValue.row && this.selfIndexPath.section == newValue.section) {
          this.isDisplay = !this.isDisplay
          return
        }
        this.isDisplay = newValue.section == this.selfIndexPath.section && this.selfIndexPath.row == newValue.row
      }
    }
  },
  props: {
    // 
    item: {
      type: Object,
      default: {},
    },
    selectIndexPath : {
      type: Object,
      default:{}
    },
    list: Array, // 数据源
    selfIndexPath:{
      type : Object,
      default:{}
    }
  },
  methods: {
    toggleList(row) {
      // 通知上层非目标选中关闭expand状态
      this.$emit("updateSelectIndex", {'section':this.selfIndexPath.section,'row':row});
    },
    callPlugin:function (item ,index) {
      this.currentPluginIndex = index
      this.currentPluginCallArgs = item.defaultCallFuncStr
    },

    // 执行插件调用
    handleCommonPluginMethod(){
      eval(this.currentPluginCallArgs);
    },
  },
};
</script>

<style lang="less" scoped>

.cell-item {
  width: 100vw;
  margin-bottom: 10px;
  overflow: hidden;
}

.tempaccList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  overflow: scroll;
  max-height: 0;
  transition: max-height 0.25s ease-out;
  width: 100vw;
}

.tempaccList.maxHeight {
  max-height: 5000px;
  transition: max-height 0.5s ease-in;
}

.accTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  text-indent: 1em;
  cursor: pointer;
  border-bottom: 1px rgba(225, 225, 225, 0.5) solid;
}
.accChevron {
  width: 20px;
  margin-right: 15px;
}
/* chevron animation  */
@keyframes open-menu {
  to {
    transform: rotate(90deg);
  }
}
@keyframes close-menu {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.open_menu {
  animation: open-menu 0.25s ease-out forwards;
}
.close_menu {
  animation: close-menu 0.25s ease-out forwards;
}

.pluginItemContainer {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: pink;
  margin-left: 14px;
  margin-right: 14px;
}

.noleftMargin{
  margin-left: 0px;
}

.noBottomMargin{
  margin-bottom: 0;
}


.pluginItemName {
  font-size: 14px;
  color: black;
  line-height: 30px;
  height: 30px;
  display: flex;
  overflow: visible;
  align-self: center;
  text-align: center;
  font-weight: 800;
}

.pluginItemMethod {
  font-size: 14px;
  overflow: visible;
  line-height: 20px;
  color: black;
  font-weight: 800;
  height: 20px;
  margin-bottom: 3px;
}

.pluginState {
  position: relative;
  background-color: salmon;
  width: 6px;
  height: 6px;
  right: -10px;
  border-radius: 3px;
  top: 2px;
}

.pluginItemNameP {
  padding: 0;
  line-height: 30px;
  height: 30px;
}

.pluginCallPanel {
  margin-left: 3.5%;
  font-size: 18px;
  word-wrap: break-word;
  border: 1px mediumseagreen solid;
  line-height: 24px;
  height: 150px;
  width: 93%;
  padding:10px;
  display: none;
}

.sectionHeaderContainer{
  display: flex;
  font-size: 18px;
  font-weight: 800;
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 0px;
}

.pluginCallPanelHidden {
  display: inline-block;
}

.debugExcuteBtn {
  height: 44px;
  margin-left: 3.5%;
  width: 93%;
  background-color: cornflowerblue;
  color: white;
  line-height: 44px;
  text-align: center;
  padding: 0;
  display: none;
}

.debugExcuteBtnVisible {
  display: block;
}

</style>